import Vue from 'vue';
/* eslint-disable */
Vue.directive('dialogDragL', {
    bind(el, binding, vnode, oldVnode) {
        console.log(el, binding)
        // console.log(binding.value)
        // if (binding.value) {
        // 获取原有属性 ie dom元素.currentStyle 火狐谷歌 window.getComputedStyle(dom元素, null);
        const sty = el.currentStyle || window.getComputedStyle(el, null);

        el.onmousedown = (e) => {
            // console.log(e.target)

            //!e.target.id.includes("size")&& e.target.className && !e.target.className.includes("ql-editor")
            if (document.getElementById('myQuillEditor')) {
                if (!document.getElementById('myQuillEditor').contains(e.target)) {
                    // 鼠标按下，计算当前元素距离可视区的距离
                    const disX = e.clientX;
                    const disY = e.clientY;

                    // 获取到的值带px 正则匹配替换
                    let styL, styT;

                    // 注意在ie中 第一次获取到的值为组件自带50% 移动之后赋值为px
                    if (sty.left.includes('%')) {
                        styL = +document.body.clientWidth * (+sty.left.replace(/\%/g, '') / 100);
                        styT = +document.body.clientHeight * (+sty.top.replace(/\%/g, '') / 100);
                    } else {
                        styL = +sty.left.replace(/\px/g, '');
                        styT = +sty.top.replace(/\px/g, '');
                    }

                    let width = window.innerWidth;
                    let height = window.innerHeight;
                    document.onmousemove = function (e) {
                        // 通过事件委托，计算移动的距离
                        const l = (e.clientX - disX) / (width / 1920);
                        const t = (e.clientY - disY) / (height / 1080);

                        // 移动当前元素
                        el.style.left = `${l + styL}px`;
                        el.style.top = `${t + styT}px`;

                        //将此时的位置传出去
                        //binding.value({x:e.pageX,y:e.pageY})
                    };

                    document.onmouseup = function (e) {
                        document.onmousemove = null;
                        document.onmouseup = null;
                    };
                }
            }
        }
    }
    // }
})